<template>
  <div>
    <h2>条件判断指令</h2>
    <!-- 条件判断指令：v-show 和 v-if -->
    <!-- 
      相同点：都能够控制元素的显示和隐藏
      不同点： 当条件为false的时候，v-show是通过display： none来让元素隐藏；v-if直接把元素移除了，从而让元素隐藏
        提示：如果一个元素经常切换他的显示隐藏状态，用v-show更好
        如果起始条件是false，v-show也会创建元素，创建后让元素display：none，所以v-show有更高的初始渲染代价
     -->
    <p v-show="flag">我通过v-show控制</p>
    <p v-if="flag">我通过v-if控制</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true
    };
  },
};
</script>

<style>
</style>